<template>
	<div class="list-wrap">
		<a v-if="!isShowShareBtn&&isApp"  href="javascript:;" @click="share" class="shareBtn"></a>
		<ul class="tabNav">
			<li ca="pt_v170720_ptlist_tab1_click" class="cur">拼团商品</li>
			<li ca="pt_v170720_ptlist_tab2_click" > <a :href="mylistUrl + '?fromTab=tab'">我的拼团</a></li>
		</ul>
		<div class="banner">
			<img src="../../../assets/image/tuan/topBanner.png" alt="">
		</div>
		<ul>
			<li v-for="item in list" class="itemBox">
				<!--如果prizeCode==AGBUYPRIZE001，则该商品入口不渲染-->
				<a v-if="item.prizeCode != 'AGBUYPRIZE001'"	:href="detailIndexUrl + '&prizeCode=' + item.prizeCode"
					:ca="'pt_v170720_ptlist_click'+ item.prizeCode" class="linkDetail">
				<div class="imgBox">
					<img :src="item.imgUrl" alt="">
				</div>
				<ul class="detailBox">
					<li :class=" item.mdseType | markType"></li>
					<li class="s1">{{item.type | joinTuanType}}</li>
					<!-- <li class="s1" v-show="item.type === 0">新人团</li>
					<li class="s1" v-show="item.type === 1">无门槛团</li> -->
					<!-- <li class="l2"><span v-show="item.type === 0">限未到店新客参团</span></li> -->
					<li class="l3"><span v-text="item.count || 0">0</span>人已团</li>

				</ul>
				<div class="listInfo">
					<div class="left">
						<h4 class="item_name" v-text="item.desc">定制车享家定制雨刮终身免费刮</h4>
						<p class="item_info">
							<span class="s1"><em v-text="item.num || 0">0</em>人团</span>
							<span class="s2">￥<em v-text="item.groupPrice">0</em></span>
							<span class="s3">单买价: <em>¥<span v-text="item.price || 0">0</span></em></span>
						</p>
					</div>
					<div class="right">
						<a class="buyBtn"  v-show="item.status === '1'">去开团</a>
						<a class="buyBtn noBuy"  v-show="item.status === '2'">已抢光</a>
					</div>
				</div>
				</a>
			</li>
		</ul>
		<div class="banner banner_bottom">
			<img src="../../../assets/image/tuan/bottomBanner.png" alt="">
		</div>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	import {Toast, MessageBox} from 'mint-ui';
	export default{
		data (){
			return {
				shareObj:{},
				signUrl:process.env.NODE_ENV == 'sit' ? common.isEnv("//recruit") : common.isEnv("//wx"),
				list:'',
				detailIndexUrl:'',
				mylistUrl: '',
				isShowShareBtn:common.checkAppversionIsGt35(),
				isApp:common.isApp()
			};
		},
		components: {
		},
		created (){
			this.getListItem();
		},
		mounted (){
			this.initShareData();
			this.mylistUrl = (common.isHtml() == "shtml" ? "/cx/cxj/cxjweb": "") + "/tuan/mylist/tuan-mylist." + common.isHtml();
			this.detailIndexUrl = (common.isHtml() == "shtml" ? "/cx/cxj/cxjweb": "") + "/tuan/detail/tuan-detail." + common.isHtml() +"?userInfo=" + (common.getQueryString('userInfo') || "");

		},
		methods: {
			getListItem: function() {
				var vm = this
				vm.$data.list = {
					obj:[{
						conpouDescription:null,
						count:2,
						desc:"［拼团直购］打蜡商品",
						groupBuySkuCode:"1045523",
						groupPrice:100,
						imgUrl:"",
						mallUrl:"h.jia.chexiangsit.com/spah5/#!/detail/",
						num:2,
						price:120,
						prizeCode:"AGBUYPRIZE01",
						skuCode:"1045523",
						spuCode:"1045697",
						status:"1",
						type:1,
					}]
				}
		        vm.$http.get(common.isdev() + '/activity/groupbuy/groupActivityList.htm')
		             .then((res) => {
		             	if(res.data.result === 1){
		             		vm.$data.list = res.data.obj
		             		this.$nextTick(function () {
		             			common.ANA_AnalyticsScan();
		             		});
		             	}
		             })
		             .catch((res) => {
		               //  console.log(res.msg)
		             })

		    },
			initShareData:function(){
			     var me = this;  
			    //window.document.title =  obj.title;  
			    //分享数据配置
			     me.shareObj = {
			       friend: {
			         title:'车享家人气拼团，邀请你也来试试。上汽直营，全国千家门店',
			         desc: "车享家人气拼团，特价养车好物等你领，带上好友拼好货！",
			         //desc: "［车享家拼团］特价养车好物等你领，带上好友拼好货！",
			         link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?utm_source=share',
			         imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/pintuanshare.png"
			       },
			       friendQuan: {
			         desc:"车享家人气拼团，特价养车好物等你领，带上好友拼好货！",
			         title:'车享家人气拼团，特价养车好物等你领，带上好友拼好货！',
			         link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?utm_source=share',
			         imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/pintuanshare.png"
			       }
			     };
			     if(!common.isApp()){ 
			        common.wxShare(me);
			     }else{
			       if(me.isShowShareBtn){
			       		setTimeout(function(){
			         		me.share();
			          	}, 1000);
			       }  
			     }
			},
			share:function(){
			    var me = this;
			    
			    	common.appShare(me);
			   
			   
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../assets/css/reset.scss";
	@import "../../../assets/css/common.scss";
	html, body {
		height: 100%;
		background-color: #F6F7F7;
	}
	.list-wrap {
		.tabNav{
			display: flex;
			display: -webkit-box;//低版本安卓
			display: -webkit-flex; 
			background-color: #fff;
			li{
				width: 50%;
				-webkit-box-flex: 1;
				-webkit-flex: 1; 
				flex:1;
				height: 4rem;
				line-height: 4rem;
				text-align: center;
				font-size: 1.5rem;
				a{
					color: #000;
				}
				&.cur{
					color:#ff6600;
					position: relative;
					&:after{
						content:'';
						position: absolute;
						bottom:0;
						width: 6rem;
						height: 2px;
						left: 50%;
						margin-left:-3rem; ;
						background-color: #ff6600;
					}
				}
			}
		}
		.shareBtn{
		  width:rem(50);
		height:rem(50);
		  line-height:10rem;
		  text-align:center;
		  color:#fff;
		  background:url('../../../assets/image/tuan/share.png') no-repeat;
		  background-size:100% 100%;
		  border-radius:50%;
		  position:fixed;
		  right:1rem;
		  bottom:5%;
		  z-index:3;
		  font-size:2.6rem;
		}
		.banner{
			height: 15rem;
			background-color: #ccc;
			margin-bottom: .8rem;
			overflow: hidden;
			&:last-child{
				height: 21.6rem;
				margin-bottom: 0;
			}
			img{
				width: 100%;
				height: auto;
			}
		}
		.itemBox{
			padding-bottom: .8rem;
			border-bottom:.9rem solid #F6F7F7;
			background-color: #fff;
			.linkDetail{
				display: block;
				color: #000;
			}
			.imgBox{
				width: 37.5rem;
				height: 25rem;
				background-color: #ccc;
				margin-bottom: 1.7rem;
				overflow: hidden;
				img{
					width: 100%;
					height: auto;
				}
			}
			.detailBox{
				overflow: hidden;
				align-items:center;
				height: 1.8rem;
				padding: 0 1.5rem;
				margin-bottom: 1rem;
				font-size: 0;
				.mark-type-01 {
					width: 6rem;
					height:1.8rem;
					float: left;
					margin-right: 0.5rem;
					background:url(../../../assets/image/tuan/mark/mark-type-01.png) center center no-repeat;
		  			background-size: contain;
		  			
				}
				.mark-type-02 {
					width: 6rem;
					height:1.8rem;
					float: left;
					margin-right: 0.5rem;
					background:url(../../../assets/image/tuan/mark/mark-type-02.png) center center no-repeat;
		  			background-size: contain;
				}
				.s1{
					width: auto;
					font-size:1.1rem;
					color:#ff6600;
					float: left;
					letter-spacing:0;
					text-align:justify;
					background:#ffefe5;
					border-radius:2px;
					height:1.8rem;
					line-height: 1.4rem;
					padding:.2rem .4rem;
					margin-right: .8rem;
				}
				.l3{
					font-size: 1.3rem;
					color: #999;
					float: right;
					span{
						color:#ff6600;
					}
				}
			}
			.listInfo{
				overflow: hidden;
				padding: 0 1.5rem;
				.left{
					float: left;
					height: 4.4rem;
					.item_name{
						font-size: 1.7rem;
						line-height: 1.7rem;
						margin-bottom: .4rem;	
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						width: 26rem;
					}
					.item_info{
						.s1{
							font-size:1.3rem;
							color: #000;
						}
						.s2{
							font-size: 1.1rem;
							em{
								font-size:1.9rem;
								margin-left: -.2rem;
							}
							
							color:#e62116;
						}
						.s3{
							font-size:1.1rem;
							color:#999;
							em{
								text-decoration:line-through;
							}
						}
					}
				}
				.right{
					float: right;
					display: flex;
					display: -webkit-box;//低版本安卓
					display: -webkit-flex; 
					align-items:center;
					height: 4.4rem;
					.buyBtn{
						background:#ff6600;
						border-radius:1.9rem;
						width:8rem;
						height:3rem;
						line-height: 3rem;
						text-align: center;
						color: #fff;
						font-size: 1.3rem;
						&.noBuy{
							background-color: #ccc;
						}
					}
				}
			}
		}
	}
</style>
